<template>
	<view class="box-detail">
		<view class="item-index-top">
			<view class="item-top-text">项目建设</view>
		</view>
		<view class="box-detail-content">
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">项目审批是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn1(item.value,index)" v-for="(item,index) in labelList1" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">项目审批完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.APPROVE_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange1"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">设计材料是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn2(item.value,index)" v-for="(item,index) in labelList2" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">设计材料完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.DESIGN_MATERIAL_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange2"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">施工设计是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn3(item.value,index)" v-for="(item,index) in labelList3" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">施工设计完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.CONSTRUCT_DESIGN_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange3"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">用地批文文件是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn4(item.value,index)" v-for="(item,index) in labelList4" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">用地批文文件完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.SITE_FILE_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange4"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">规划施工许可证是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn5(item.value,index)" v-for="(item,index) in labelList5" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">规划施工许可证完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.PLANNING_LICENSE_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange5"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">开工建设材料是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn6(item.value,index)" v-for="(item,index) in labelList6" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">开工建设材料完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.START_CHECK_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange6"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">竣工验收材料是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn7(item.value,index)" v-for="(item,index) in labelList7" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">竣工验收料完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.FINISH_CHECK_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange7"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-item-box">
				<view class="box-detail-content-item">
					<view class="row-title">其他是否完成</view>
					<checkbox-group class="checkbox-group-style" @change="checkboxChange">
					  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn8(item.value,index)" v-for="(item,index) in labelList8" :key="item.value" >
					    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
							<view class="image-box"></view>
							<view class="">{{item.name}}</view>
					  </label>
					</checkbox-group>
				</view>
				<view class="box-detail-content-item date-pick-style">
					<view class="row-title">其他完成日期</view>
					<uni-datetime-picker class="form-picker" type="date" :value="formData.OTHER_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange8"></uni-datetime-picker>
					<image src="../../../../static/images/icon_calendar.png" mode=""></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				code:'',
				labelName:'0',//选中状态
				labelDataList:[],
				labelList1: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				labelList2: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				labelList3: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				labelList4: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				labelList5: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				labelList6: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				labelList7: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				labelList8: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				formData:{}
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			pageData(){
				if(this.pageData.model){
					console.log(this.pageData.model,"this.pageData.model")
					if(this.pageData.model.APPROVE){
						this.labelBtn1(this.pageData.model.APPROVE,this.pageData.model.APPROVE)
					}
					if(this.pageData.model.DESIGN_MATERIAL){
						this.labelBtn2(this.pageData.model.DESIGN_MATERIAL,this.pageData.model.DESIGN_MATERIAL)
					}
					if(this.pageData.model.CONSTRUCT_DESIGN){
						this.labelBtn3(this.pageData.model.CONSTRUCT_DESIGN,this.pageData.model.CONSTRUCT_DESIGN)
					}
					if(this.pageData.model.SITE_FILE){
						this.labelBtn4(this.pageData.model.SITE_FILE,this.pageData.model.SITE_FILE)
					}
					if(this.pageData.model.PLANNING_LICENSE){
						this.labelBtn5(this.pageData.model.PLANNING_LICENSE,this.pageData.model.PLANNING_LICENSE)
					}
					if(this.pageData.model.START_CHECK){
						this.labelBtn6(this.pageData.model.START_CHECK,this.pageData.model.START_CHECK)
					}
					if(this.pageData.model.FINISH_CHECK){
						this.labelBtn7(this.pageData.model.FINISH_CHECK,this.pageData.model.FINISH_CHECK)
					}
					if(this.pageData.model.OTHER){
						this.labelBtn8(this.pageData.model.OTHER,this.pageData.model.OTHER)
					}
					this.formData={
						PROJ_ID:this.pageData.model.PROJ_ID,
						APPROVE:this.pageData.model.APPROVE,//项目审批是否完成
						APPROVE_DATE:this.pageData.model.APPROVE_DATE,//项目审批完成日期
						DESIGN_MATERIAL:this.pageData.model.DESIGN_MATERIAL,//设计材料是否完成
						DESIGN_MATERIAL_DATE:this.pageData.model.DESIGN_MATERIAL_DATE,//设计材料完成日期
						CONSTRUCT_DESIGN:this.pageData.model.CONSTRUCT_DESIGN,//施工设计是否完成
						CONSTRUCT_DESIGN_DATE:this.pageData.model.CONSTRUCT_DESIGN_DATE,//施工设计完成日期
						SITE_FILE:this.pageData.model.SITE_FILE,//用地批文文件是否完成
						SITE_FILE_DATE:this.pageData.model.SITE_FILE_DATE,//用地批文文件完成日期
						PLANNING_LICENSE:this.pageData.model.PLANNING_LICENSE,//规划施工许可证是否完成
						PLANNING_LICENSE_DATE:this.pageData.model.PLANNING_LICENSE_DATE,//规划施工许可证完成日期
						START_CHECK:this.pageData.model.START_CHECK,//开工建设材料是否完成
						START_CHECK_DATE:this.pageData.model.START_CHECK_DATE,//开工建设材料完成日期
						FINISH_CHECK:this.pageData.model.FINISH_CHECK,//竣工验收材料是否完成
						FINISH_CHECK_DATE:this.pageData.model.FINISH_CHECK_DATE,//竣工验收料完成日期
						OTHER:this.pageData.model.OTHER,//其他是否完成
						OTHER_DATE:this.pageData.model.OTHER_DATE,//其他完成日期
					}
				}else{
					this.formData={}
				}
				console.log(this.formData,"this.formData")
			}
		},
		methods:{
			numToStr(num){
			},
			labelBtn1(name,index){
				console.log(name,index,"name,index")
				this.labelName = name
				this.formData.APPROVE=name
				if(index===0){
					this.labelList1[0].checked = true
					this.labelList1[1].checked = false	 
				}else{
					this.labelList1[0].checked = false
					this.labelList1[1].checked = true    
				}
			
			},
			labelBtn2(name,index){
				this.labelName = name
				this.formData.DESIGN_MATERIAL=name
				if(index===0){
					this.labelList2[0].checked = true
					this.labelList2[1].checked = false	 
				}else{
					this.labelList2[0].checked = false
					this.labelList2[1].checked = true    
				}
			
			},
			labelBtn3(name,index){
				this.labelName = name
				this.formData.CONSTRUCT_DESIGN=name
				if(index===0){
					this.labelList3[0].checked = true
					this.labelList3[1].checked = false	 
				}else{
					this.labelList3[0].checked = false
					this.labelList3[1].checked = true    
				}
			
			},
			labelBtn4(name,index){
				this.labelName = name
				this.formData.SITE_FILE=name
				if(index===0){
					this.labelList4[0].checked = true
					this.labelList4[1].checked = false	 
				}else{
					this.labelList4[0].checked = false
					this.labelList4[1].checked = true    
				}
			
			},
			labelBtn5(name,index){
				this.labelName = name
				this.formData.PLANNING_LICENSE=name
				if(index===0){
					this.labelList5[0].checked = true
					this.labelList5[1].checked = false	 
				}else{
					this.labelList5[0].checked = false
					this.labelList5[1].checked = true    
				}
			
			},
			labelBtn6(name,index){
				this.labelName = name
				this.formData.START_CHECK=name
				if(index===0){
					this.labelList6[0].checked = true
					this.labelList6[1].checked = false	 
				}else{
					this.labelList6[0].checked = false
					this.labelList6[1].checked = true    
				}
			
			},
			labelBtn7(name,index){
				this.labelName = name
				this.formData.FINISH_CHECK=name
				if(index===0){
					this.labelList7[0].checked = true
					this.labelList7[1].checked = false	 
				}else{
					this.labelList7[0].checked = false
					this.labelList7[1].checked = true    
				}
			
			},
			labelBtn8(name,index){
				this.labelName = name
				this.formData.OTHER=name
				if(index===0){
					this.labelList8[0].checked = true
					this.labelList8[1].checked = false	 
				}else{
					this.labelList8[0].checked = false
					this.labelList8[1].checked = true    
				}
			
			},
			dateChange1(e) {
				this.date = e
				this.formData.APPROVE_DATE=e 
			},
			dateChange2(e) {
				this.date = e
				this.formData.DESIGN_MATERIAL_DATE=e 
			},
			dateChange3(e) {
				this.date = e
				this.formData.CONSTRUCT_DESIGN_DATE=e 
			},
			dateChange4(e) {
				this.date = e
				this.formData.SITE_FILE_DATE=e 
			},
			dateChange5(e) {
				this.date = e
				this.formData.PLANNING_LICENSE_DATE=e 
			},
			dateChange6(e) {
				this.date = e
				this.formData.START_CHECK_DATE=e 
			},
			dateChange7(e) {
				this.date = e
				this.formData.FINISH_CHECK_DATE=e 
			},
			dateChange8(e) {
				this.date = e
				this.formData.OTHER_DATE=e 
			},
			checkboxChange: function (e) {
			  this.labelDataList = e.detail.value
			  console.log(e,"…………………………………………")
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 60rpx;
	}
	page{
		padding-bottom: 20rpx;
	}
	.box-detail {
		min-height: 760rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}
	.content-item-box{
		border-bottom: 2rpx solid #e8f0f2;
		margin-bottom: 20rpx;
	}
	.item-index-top{
		// width: 650rpx;
		height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		background-color: #0099cc;
		border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.item-top{
		display: flex;
		justify-content: space-between;
		.setion-left{
			display: flex;
			flex-direction: column;
			.left-text-top{
				font-size: 30rpx;
				font-weight: 600;
				color: #414a5d;
			}
			.left-text-bot{
				margin-top: 22rpx;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		.setion-right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.right-text-top{
				height: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #9a9a9a;
			}
			.right-text-bot{
				margin-top: 22rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #999999;
			}
		}
	}
	.box-detail-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8rpx;
	
		.name {
			font-size: 30rpx;
			color: #414a5d;
			font-weight: bold;
		}
	
		.date {
			font-size: 26rpx;
			color: #9a9a9a;
		}
	}
	
	.box-net {
		font-size: 26rpx;
		color: #0099cc;
	}
	
	.box-detail-content {
		margin-top: 24rpx;
		padding: 0 10rpx;
		// border-bottom: 8rpx solid #e8f0f2;
		
	}
	// .border {
	// 	;
	// }
	.border-wid{
		border-bottom: 0
	}
	.box-detail-content-item {
		display: flex;
		flex-direction: row;
		// justify-content: flex-start;
		// justify-content: space-between;
		margin-bottom: 20rpx;
	
		.row-title {
			width: 280rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
	
			&.mag {
				margin-left: 18rpx;
			}
		}
	
		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: left;
	
			&.mag {
				margin-right: 18rpx;
			}
		}
	}
	
	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		
	}
	.box-attach{
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding: 0 10rpx;
		border-top: 1px solid #e8f0f2;
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		// padding: 0 18rpx;
		height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.fixed-action-bar{
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		.item{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.icon{
			width: 30rpx;
		}
		.btn-box{
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}
		.text-edit{
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}
		.text-delete{
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.checkbox-group-style{
		display: flex;
	}
	.checkbox{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20rpx;
		color:#808080 ;
		// <image src="../../../../static/images/icon_checkbox_01.png" mode=""></image>
		.image-box{
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			background-image:url("../../../../static/images/icon_checkbox_02.png");
			background-size: 100% 100%; 
		}
	}
	.selectBox{
		color: #0099cc;
		.image-box{
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			background-image:url("../../../../static/images/icon_checkbox_01.png");
			background-size: 100% 100%; 
		}
		
	}
	.form-picker {
		width: 250rpx;
	}
	.date-pick-style{
		justify-content: flex-start;
		align-items: center;
		image{
			width:36rpx;
			height: 32rpx;
		}
		.text-input-hou{
			font-size: 26rpx;
			padding: 0 100rpx 0 20rpx;
		}
	}
</style>
